<template>
  <div class="image-select">
    <span class="img" :class="{ 'skeleton-45': !loaded }" :style="{ backgroundImage: `url(${image})` }"
      @click="$emit('click')">
    </span>
    <span class="price">￥{{ price }}</span>
  </div>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      default: ''
    },
    price: {
      default: 10.00
    }
  },
  data() {
    return {
      loaded: false
    }
  },
  created() {
    const img = new Image()
    img.src = this.image
    img.onload = () => {
      this.loaded = true
    }
  }
}
</script>

<style lang="scss">
.bigbox {
  width: 100%;
  display: inline-block;
}

.price {
  // background: rgba(0, 0, 0, 0.4);
  text-align: center;
  color: #ff0000;
  display: block;
  font-size: 12px;
  width: 100%;
  height: 15px;
  position: absolute;
  bottom: 0.1rem;
  // background: rgba(0, 0, 0, 0.2);
  left: 0;
}

.image-select {
  display: inline-block;
  margin: 0.0752rem;
  padding: 0.2rem;
  width: 0.91rem;
  height: 1.2rem;
  position: relative;
  background: transparent center/contain no-repeat;
  background-color: white;
  // background-position-x: 0;
  // background-position-y: 0;
}

.image-select .img {
  width: 0.89rem;
  display: inline-block;
  background: transparent center/contain no-repeat;
  height: 0.89rem;
}
</style>
